<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>拼图游戏</title>
    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
        border: 0;
        user-select: none;
      }
      /* *是通配符，给所有的元素去掉默认样式，因为有的浏览器会默认加上一些样式，这可能会给布局带来问题 */
      body {
        width: 100%;
        height: 100%;
      }
      body {
        width: 100%;
        height: 100%;
        background: url(picture/timg.jpg) no-repeat;
      }
      #up {
        font-size: 25px;
        font-family: 幼圆;
        color: darkgray;
      }
      /* 给body设置100%的高度和宽度，这样就会根据浏览器屏幕大小自动适配 */
      #container {
        position: relative;
        width: 640px;
        height: 450px;
        margin-left: 200px;
        margin-top: 25px;
        border-radius: 1px;
      }
      /* 这是包裹所有元素的DIV，给他设置620px的宽和450px的高，这个大小可以设置为更大，但是不能小，至少要能包含里面所有的元素 */
      #game {
        position: absolute;
        width: 450px;
        height: 450px;
        border-radius: 5px;
        display: inline-block;
        /*background-color: #ffe171;*/
        box-shadow: 0 0 10px #ffe171;
      }
      /* 这是游戏区的DIV，这个大小是计算出来的，取决于你的小方块的大小。这里我们设置小方块的大小为150px 150px，所以这个大小是150px*3，为450px */
      #game div {
        position: absolute;
        width: 149px;
        height: 149px;
        box-shadow: 1px 1px 2px #777;
        background-color: #20a6fa;
        color: white;
        text-align: center;
        font-size: 150px;
        line-height: 150px;
        cursor: pointer;
        -webkit-transition: 0.3s; /*浏览器前缀，兼容其他浏览器 chrome*/
        -moz-transition: 0.3s; /*firefox*/
        -ms-transition: 0.3s; /*ie*/
        -o-transition: 0.3s; /*opera*/
        transition: 0.3s;
      }
      /* 这就是小方块的大小了，定位为绝对定位，这样改变位置不会影响其他元素的位置。宽高都是149px。注意了，我们还设置了box-shadow:1px 1px 2px #777 ；
        它还有边框阴影，所以149px 加上边框1px，它的总宽度是150px 下面的transition：0.3s是设置过渡时间，这是css3的属性，它会让属性改变呈现过渡动画，所以
        当我们改变方块的位置时，它会有一个动画，我们不必自己编写动画函数，这回让你疯狂*/
      #game div:hover {
        color: #ffe171;
      }
      /*给方块设置鼠标悬停动画，当鼠标悬停在元素上面时，会用这里的属性替换上面的属性，移开后又会变为原来的，这里我们是把字体颜色改变*/
      #control {
        width: 170px;
        height: 450px;
        display: block;
        float: right;
      }
      /*控制区，display:inline-block会让元素呈现块状元素的特性，使得可以改变大小，同时也会具有行内元素的特性，使得不会占据一行空间，float:right让元素浮动到
        右边*/
      #control p {
        height: 25px;
        font-size: 20px;
        color: #222;
        margin-top: 10px;
        text-align: center;
      }
      /*设置控制区按钮的共同样式*/
      #start {
        display: inline-block;
        font-size: 28px;
        width: 100px;
        height: 35px;
        line-height: 35px;
        background-color: #20a6fa;
        color: #ffe171;
        text-shadow: 1px 1px 2px #ffe171;
        border-radius: 5px;
        box-shadow: 2px 2px 5px #4c98f5;
        text-align: center;
        cursor: pointer;
      }
      #start:hover {
        filter: brightness(110%);
        color: #fff;
      }
      /*给start按钮设置属性。cursor:pointer属性让鼠标移到元素上面时会显示不同的鼠标形状，pointer是手型*/
      #reset {
        display: inline-block;
        font-size: 28px;
        width: 100px;
        height: 35px;
        line-height: 35px;
        margin-top: 10px;
        background-color: #20a6fa;
        color: #ffe171;
        text-shadow: 1px 1px 2px #ffe171; /*字体阴影*/
        border-radius: 5px; /*圆角属性*/
        box-shadow: 2px 2px 5px #4c98f5; /*盒子阴影*/
        text-align: center; /*文字居中*/
        cursor: pointer;
      }
      #reset:hover {
        filter: brightness(110%);
        color: #fff;
      }
      /*给Reset按钮设置属性*/
      #d1 {
        left: 0px;
      }
      #d2 {
        left: 150px;
      }
      #d3 {
        left: 300px;
      }
      #d4 {
        top: 150px;
      }
      #d5 {
        top: 150px;
        left: 150px;
      }
      #d6 {
        top: 150px;
        left: 300px;
      }
      #d7 {
        top: 300px;
      }
      #d8 {
        left: 150px;
        top: 300px;
      }
      /*这是预先给每个小方块按照顺序排好位置*/

      #ranking {
        width: 300px;
        height: 400px;
        position: absolute;
        left: 720px;
        border-radius: 20px;
        overflow: hidden;
      }
      .hearder {
        width: 100%;
      }
      .hearder img {
        width: 100%;
        height: 50px;
      }
      .container {
        width: 100%;
        position: relative;
        top: -25px;
      }
      .container table {
        width: 100%;
      }
      .container table thead tr {
        background-color: #4c98f5;
      }
      .container table tbody tr {
        height: 40px;
      }
      .sortColor {
        display: inline-block;
        width: 18px;
        height: 18px;
        font-size: 12px;
        line-height: 18px;
        border-radius: 6px;
        background-color: #c5c7cd;
      }
      #data tr:nth-child(1) .sortColor {
        background-color: #f73131;
      }
      #data tr:nth-child(2) .sortColor {
        background-color: #f60;
      }
      #data tr:nth-child(3) .sortColor {
        background-color: #ffc20d;
      }
      .container table #data tr:nth-child(2n + 1) {
        background-color: antiquewhite;
      }
      .container table #data tr:nth-child(2n) {
        background-color: gainsboro;
      }
      /* 歌词 */
      #lyricc {
        width: 450px;
        position: absolute;
        top: 470px;
        left: 50%;
        text-align: center;
        font-size: 25px;
        color: #4c98f5;
      }
    </style>
    <script>
      var time = 0;
      //保存定时时间
      var pause = true;
      //设置是否暂停标志，true表示暂停
      var set_timer;
      //设置定时函数
      var d = new Array(10);
      //保存大DIV当前装的小DIV的编号

      // 每个小div可以去的位置，比如第一块可以去2,4号位置
      var d_direct = new Array(
        //为了逻辑更简单，第一个元素我们不用，我们从下标1开始使用
        [0],
        [2, 4],
        [1, 3, 5],
        [2, 6],
        [1, 5, 7],
        [2, 4, 6, 8],
        [3, 5, 9],
        [4, 8],
        [5, 7, 9],
        [6, 8]
      );

      // 第一个表示left,第二个表示top，比如第一块的位置为let:0px,top:0px
      var d_posXY = new Array([0], [0, 0], [150, 0], [300, 0], [0, 150], [150, 150], [300, 150], [0, 300], [150, 300], [300, 300]);
      //大DIV编号的位置
      d[1] = 1;
      d[2] = 2;
      d[3] = 3;
      d[4] = 4;
      d[5] = 5;
      d[6] = 6;
      d[7] = 7;
      d[8] = 8;
      d[9] = 0;
      //默认按照顺序排好，大DIV第九块没有，所以为0，我们用0表示空白块

      //游戏开始弹出名字输入框
      var myname;
      function name() {
        myname = prompt("请输入名字", "姓名"); //名字输入框
        if (!myname.trim()) {
          name();
        }
      }

      //突破用户以前的纪录
      function names(val, vals, value) {
        for (let i = 0; i < value.length; i++) {
          if (value[i].name == val) {
            if (value[i].time > vals) {
              alert(`恭喜${value[i].name}大神破记录`);
              value[i].time = vals;
              return value;
            } else {
              return value;
            }
          }
        }
        let obj = {};
        obj.name = val;
        obj.time = vals;
        value.push(obj);
        return value;
      }

      //移动函数
      function move(id) {
        document.getElementById("music").play();
        if (pause) {
          document.getElementById("start").innerHTML = "暂停"; //把按钮文字设置为暂停
          pause = false; //暂停表示设置为false
          set_timer = setInterval(timer, 1000); //启动定时
          // document.getElementById("music").play();
          //如果当前是暂停，则开始
        }
        var i = 1;
        for (i = 1; i < 10; ++i) {
          if (d[i] == id) break;
        }
        //这个for循环是找出小DIV在大DIV中的位置
        var target_d = 0;
        //保存小DIV可以去的编号，0表示不能移动
        target_d = whereCanTo(i);
        //用来找出小DIV可以去的位置，如果返回0，表示不能移动，如果可以移动，则返回可以去的位置编号
        if (target_d != 0) {
          d[i] = 0;
          //把当前的大DIV编号设置为0，因为当前小DIV已经移走了，所以当前大DIV就没有装小DIV了
          d[target_d] = id;
          //把目标大DIV设置为被点击的小DIV的编号
          document.getElementById("d" + id).style.left = d_posXY[target_d][0] + "px";
          document.getElementById("d" + id).style.top = d_posXY[target_d][1] + "px";
          //最后设置被点击的小DIV的位置，把它移到目标大DIV的位置
        }
        //如果target_d不为0，则表示可以移动，且target_d就是小DIV要去的大DIV的位置编号
        var finish_flag = true;
        //设置游戏是否完成标志，true表示完成
        for (var k = 1; k < 9; ++k) {
          if (d[k] != k) {
            finish_flag = false;
            break;
            //如果大DIV保存的编号和它本身的编号不同，则表示还不是全部按照顺序排的，那么设置为false，跳出循环，后面不用再判断了，因为只要一个不符，就没完成游戏
          }
        }
        //从1开始，把每个大DIV保存的编号遍历一下，判断是否完成
        if (finish_flag == true) {
          if (!pause) start();
          name();
          let value = JSON.parse(localStorage.getItem("ranking"));
          if (!value) {
            let obj = {},
              arr = [];
            obj.name = myname;
            obj.time = time;
            arr.push(obj);
            localStorage.setItem("ranking", JSON.stringify(arr));
          } else {
            value = names(myname, time, value);
            value = value.sort(compare("time", true));
            localStorage.setItem("ranking", JSON.stringify(value));
          }
          getData();
        }
        //如果为true，则表示游戏完成，如果当前没有暂停，则调用暂停韩式，并且弹出提示框，完成游戏。
        //start()这个函数是开始，暂停一起的函数，如果暂停，调用后会开始，如果开始，则调用后会暂停
      }

      //判断是否可移动函数，参数是大DIV的编号，不是小DIV的编号，因为小DIV编号跟可以去哪没关系，小DIV是会动的
      function whereCanTo(cur_div) {
        var j = 0;
        var move_flag = false;
        for (j = 0; j < d_direct[cur_div].length; ++j) {
          //把所有可能去的位置循环遍历一下
          if (d[d_direct[cur_div][j]] == 0) {
            move_flag = true;
            break;
          }
          //如果目标的值为0，说明目标位置没有装小DIV，则可以移动，跳出循环
        }
        if (move_flag == true) {
          return d_direct[cur_div][j];
        } else {
          return 0;
        }
        //可以移动，则返回目标位置的编号，否则返回0，表示不可移动
      }

      //定时函数，每一秒执行一次
      function timer() {
        time += 1; //一秒钟加一，单位是秒
        document.getElementById("timer").innerHTML = format(time);
      }

      //时间格式化
      function format(time) {
        var min = parseInt(time / 60); //把秒转换为分钟，一分钟60秒，取商就是分钟
        var sec = time % 60; //取余就是秒
        if (min <= 0) {
          return sec + "秒"; //然后把时间更新显示出来
        } else {
          return min + "分" + sec + "秒"; //然后把时间更新显示出来
        }
      }

      //开始暂停函数
      function start() {
        if (pause) {
          document.getElementById("start").innerHTML = "暂停"; //把按钮文字设置为暂停
          pause = false; //暂停表示设置为false
          set_timer = setInterval(timer, 1000); //启动定时
          document.getElementById("music").play();
          //如果当前是暂停，则开始
        } else {
          document.getElementById("start").innerHTML = "开始";
          pause = true;
          clearInterval(set_timer);
        }
      }

      //重置函数
      function reset() {
        time = 0; //把时间设置为0
        random_d(); //把方块随机打乱函数
        // if (pause)
        //   //如果暂停，则开始计时
        //   start();
      }

      //随机打乱方块函数，我们的思路是从第九块开始，随机生成一个数，然后他们两块对调一下
      function random_d() {
        for (var i = 9; i > 1; --i) {
          var to = parseInt(Math.random() * (i - 1) + 1); //产生随机数，范围为1到i，不能超出范围，因为没这个id的DIV
          if (d[i] != 0) {
            document.getElementById("d" + d[i]).style.left = d_posXY[to][0] + "px";
            document.getElementById("d" + d[i]).style.top = d_posXY[to][1] + "px";
          }
          //把当前的DIV位置设置为随机产生的DIV的位置
          if (d[to] != 0) {
            document.getElementById("d" + d[to]).style.left = d_posXY[i][0] + "px";
            document.getElementById("d" + d[to]).style.top = d_posXY[i][1] + "px";
          }
          //把随机产生的DIV的位置设置为当前的DIV的位置
          var tem = d[to];
          d[to] = d[i];
          d[i] = tem;
          //然后把它们两个的DIV保存的编号对调一下
        }
      }

      /** 两个参数： 参数1 是排序用的字段， 参数2 是：是否升序排序 true 为升序，false为降序*/
      function compare(attr, rev) {
        if (rev == undefined) {
          rev = 1;
        } else {
          rev = rev ? 1 : -1;
        }
        return (a, b) => {
          a = a[attr];
          b = b[attr];
          if (a < b) {
            return rev * -1;
          }
          if (a > b) {
            return rev * 1;
          }
          return 0;
        };
      }

      //获取排行榜
      function getData() {
        let arr = JSON.parse(localStorage.getItem("ranking"));
        let str = "";
        if (arr) {
          arr.forEach((item, index) => {
            str += `<tr>
                          <th>
      											<span class='sortColor'>${index + 1}</span>
      										</th>
                          <th>${item.name}</th>
                          <th>${format(item.time)}</th>
                        </tr>`;
          });
          data.innerHTML = str;
        }
      }

      // 监听播放audio进度, 切换歌词显示
      function showLyric() {
        document.getElementById("music").addEventListener("timeupdate", () => {
          let curTime = Math.floor(document.getElementById("music").currentTime);
          // 避免空白出现
          if (lyric[curTime]) {
            curLyric = lyric[curTime];
            document.querySelector("#lyricc div").innerHTML = curLyric;
            lastLy = curLyric;
          } else {
            document.querySelector("#lyricc div").innerHTML = lastLy;
          }
        });
      }

      //歌曲格式化
      function _formatLyr(lyricStr) {
        // 可以看network观察歌词数据是一个大字符串, 进行拆分.
        let reg = /\[.+?\]/g; //
        let timeArr = lyricStr.match(reg); // 匹配所有[]字符串以及里面的一切内容, 返回数组
        let contentArr = lyricStr.split(/\[.+?\]/).slice(1); // 按照[]拆分歌词字符串, 返回一个数组(下标为0位置元素不要,后面的留下所以截取)
        let lyricObj = {}; // 保存歌词的对象, key是秒, value是显示的歌词
        timeArr.forEach((item, index) => {
          // 拆分[00:00.000]这个格式字符串, 把分钟数字取出, 转换成秒
          let ms = item.split(":")[0].split("")[2] * 60;
          // 拆分[00:00.000]这个格式字符串, 把十位的秒拿出来, 如果是0, 去拿下一位数字, 否则直接用2位的值
          let ss = item.split(":")[1].split(".")[0].split("")[0] === "0" ? item.split(":")[1].split(".")[0].split("")[1] : item.split(":")[1].split(".")[0];
          // 秒数作为key, 对应歌词作为value
          lyricObj[ms + Number(ss)] = contentArr[index];
        });
        // 返回得到的歌词对象(可以打印看看)
        return lyricObj;
      }

      //音乐循环
      function playMusic(musicList, lyrics) {
        var myAudio = document.getElementById("music");
        //是否进行预加载
        myAudio.preload = false;
        //是否显示隐藏按钮
        myAudio.controls = true;
        myAudio.hidden = true;
        //从音乐列表中，获取第一个音乐（并删除）
        var src = musicList.shift();
        //从歌词列表中，获取第一个音乐（并删除）
        lyric = lyrics.shift();
        lyrics.push(lyric);
        //格式化歌词
        lyric = _formatLyr(lyric);
        var curLyric = lyric[0]; // 当前显示哪句歌词
        lastLy = ""; // 记录当前播放歌词
        showLyric();
        myAudio.src = src;
        //将第一个音乐添加到数组的结尾，这样实现循环
        musicList.push(src);
        //绑定音乐结束事件，当音乐播放完成后，将会触发playEndedHandler方法
        myAudio.addEventListener("ended", playEndedHandler, false);
        //播放当前音乐
        // myAudio.play();
        // myAudio.appendChild(myAudio);
        //将循环播放关闭，如果开启，将不能触发playEndedHandler方法，只能进行单曲循环
        myAudio.loop = false;

        function playEndedHandler() {
          src = musicList.shift();
          myAudio.src = src;
          musicList.push(src);
          myAudio.play();

          lyric = lyrics.shift();
          lyrics.push(lyric);
          lyric = _formatLyr(lyric);
          showLyric();
        }
      }

      //初始化函数，页面加载的时候调用重置函数，重新开始
      window.onload = function () {
        reset();
        getData();
        //存放音乐列表，根据音乐文件路径，进行填写
        var musicList = ["./music/赐我.mp3", "./music/青梅竹马.mp3"];
        //歌词区域
        var lyrics = [
          "[00:00.000] 作词 : 喵喵笑嘻嘻\n[00:00.580] 赐我 作曲 : 喵喵笑嘻嘻\n[00:01.160] 编曲 : 喵喵笑嘻嘻\n[00:01.740]赐我一场相爱，\n[00:02.970]怎么你又匆匆地离开，\n[00:05.670]赐我一场痛快，\n[00:07.080]怎么剩我迟迟难释怀，\n[00:09.840]赐我一场期待，\n[00:11.220]怎么彼此走散在人海，\n[00:13.740]只道当初何必谈未来，\n[00:17.820]恍然之间已是春去又秋来，\n[00:21.780]长发及腰你却早就已不在，\n[00:25.830]太多爱恨纠缠我却心口难开，\n[00:30.060]牵过了的手败给了依赖，\n[00:33.930]回忆不知不觉褪去了色彩，\n[00:38.010]可那山盟海誓该怎么忘怀，\n[00:42.030]我好像独自站在那三尺红台，\n[00:46.380]等你来为我喝一声倒彩，\n[00:49.920]赐我一场相爱，\n[00:51.630]怎么你又匆匆地离开，\n[00:53.820]赐我一场痛快，\n[00:55.530]怎么剩我迟迟难释怀，\n[00:57.960]赐我一场期待，\n[00:59.580]怎么彼此走散在人海，\n[01:02.250]只道当初何必谈未来，\n[01:06.810]我们若只如，\n[01:09.090]第一次遇见，\n[01:10.800]为我而执迷不悟，\n[01:13.110]一切都不会变，\n[01:14.850]已是百口难辩又何须多言，\n[01:18.930]徒留思念怎么浅，\n[01:30.540]那些遗憾不甘明明想掩埋，\n[01:34.590]偶尔前缘旧梦偏偏又作怪，\n[01:38.670]理不清求不来剪不断解不开，\n[01:42.780]是恨是爱还是执念难捱，\n[01:46.470]赐我一场相爱，\n[01:48.240]怎么你又匆匆地离开，\n[01:50.400]赐我一场痛快，\n[01:52.260]怎么剩我迟迟难释怀，\n[01:54.750]赐我一场期待，\n[01:56.220]怎么彼此走散在人海，\n[01:58.800]只道当初何必谈未来，\n[02:03.240]相逢又离别是等闲，\n[02:07.290]何必又夜夜空悲切，\n[02:11.430]忘了你最初的谎言，\n[02:15.180]和你最后的敷衍，\n[02:19.590]若你早知道会厌倦，\n[02:23.430]何必曾拨弄我心弦，\n[02:27.540]花前又月下是瞬间，\n[02:31.350]天各一方是永远。\n",
          "[00:00.000] 作词 : 李焯雄\n[00:01.000] 青梅竹马 作曲 : 丁世光\n[00:20.90]Wo My Lifetime Friend Yeah Wo\n[00:27.120]有没有这样的朋友\n[00:29.880]童年像另一个星球\n[00:32.490]发呆的你 害羞的你\n[00:35.730]拉裙子遮住脸的你\n[00:40.140]有没有这样的感受\n[00:42.980]很亲 但并不常联络\n[00:45.480]我记得 昨天的你\n[00:48.700]彷佛还等我 在路口\n[00:50.580]你还记得吗 为你摘的花\n[00:54.70]青梅和竹马 永远的暑假\n[00:57.210]你现在好吗 岁月泡的茶\n[01:00.440]路不断分岔 还留在老家\n[01:05.50]一转眼已高过老师他们\n[01:08.180]出了远门 有自己的人生\n[01:11.440]很久没见 但感觉在左右\n[01:14.590]幸好有你 回忆不被没收\n[01:17.990]有一种自由它叫做青春\n[01:21.80]有一种爱 并不必当情人\n[01:24.370]非常单纯 互相绝对信任\n[01:27.650]彼此面前 做最自然的人\n[01:37.750]做最自然的人\n[01:45.530]有没有认识新的朋友\n[01:48.440]这里像另一个星球\n[01:50.930]念我的你 疼我的你\n[01:54.80]没人像你对我没保留\n[01:58.570]有没有我一样的感受\n[02:01.340]想念 但不必常见面\n[02:03.870]我还记得 当年的你\n[02:07.230]彷佛一拐弯 会碰头\n[02:10.360]（你还记得吗）时间的浪花\n[02:13.240]（青梅和竹马）永远的暑假\n[02:16.490]（你现在好吗）你说你爱他\n[02:20.30]（路不断分岔）我也有新家\n[02:23.30]一转眼已高过老师他们\n[02:26.650]出了远门 有自己的人生\n[02:29.970]很久没见 但感觉在左右\n[02:33.220]幸好有你 回忆不被没收\n[02:36.440]有一种自由它叫做青春\n[02:39.690]有一种爱 并不必当情人\n[02:42.850]非常单纯 互相绝对信任\n[02:46.829]彼此面前 做最自然的人\n[02:48.770]Rap\n[02:48.910]就爱念 别太累\n[02:50.620]你说过那些话\n[02:52.110]像妹妹那些话\n[02:53.540]煮东西像我妈\n[02:55.90]买东西爱还价\n[02:56.760]你和他 还好吗\n[02:58.300]照顾你这份责任\n[03:00.240]现在我委托他\n[03:01.750]我一切都很好\n[03:03.180]短讯发太少\n[03:04.540]好啦我知道 本来我就话很少\n[03:07.370]想很多 话很少\n[03:09.20]怕会造成打扰\n[03:10.550]好吧 记住了\n[03:12.190]我会 把自己顾好\n[03:15.990]细雨纷纷 模糊树上刻痕\n[03:19.50]出了远门 很久没说我们\n[03:22.410]很久没见 但感觉在左右\n[03:25.530]幸好有你 回忆不被没收\n[03:28.840]有一种温暖并没有名称\n[03:31.970]有一种爱 并不必当情人\n[03:35.280]非常单纯 互相绝对信任\n[03:38.510]彼此面前 做最自然的人\n[03:41.760]一转眼已高过老师他们\n[03:44.590]出了远门 有自己的人生\n[03:48.50]很久没见 但感觉在左右\n[03:51.400]幸好有你 回忆不被没收\n[03:54.500]有一种自由它叫做青春\n[03:57.760]有一种爱 并不必当情人\n[04:01.290]非常单纯 互相绝对信任\n[04:04.240]彼此面前 做最自然的人\n[04:12.490]My Lifetime Friend Wo\n[04:16.310]My Lifetime Friend Wo\n[04:18.940]My Lifetime Friend Wo\n[04:33.0]The end~\n",
        ];
        playMusic(musicList, lyrics);
      };
    </script>
  </head>
  <body>
    <div id="up">
      <p>游戏规则：</p>
      <p>它的玩法是移动空格块旁边的方块，使得它们按照方块上面标的数字顺序排好</p>
      <p>点击重来顺序会重新被打乱</p>
    </div>
    <div id="container">
      <!--最外面的DIV，用来包含里面的结构-->
      <div id="game">
        <!--游戏区，也就是大DIV方块-->
        <div id="d1" onclick="move(1)">1</div>
        <!--小DIV，也就是8个小方块。当点击的时候执行move()函数，参数是显示的编号，这样我们就知道点击了那个方块-->
        <div id="d2" onclick="move(2)">2</div>
        <div id="d3" onclick="move(3)">3</div>
        <div id="d4" onclick="move(4)">4</div>
        <div id="d5" onclick="move(5)">5</div>
        <div id="d6" onclick="move(6)">6</div>
        <div id="d7" onclick="move(7)">7</div>
        <div id="d8" onclick="move(8)">8</div>
      </div>
      <div id="control">
        <!--游戏控制区-->
        <p>
          <rowspan id="timeText">总用时</rowspan>
          <rowspan id="timer"></rowspan>
        </p>
        <!--显示游戏时间区域-->
        <p>
          <rowspan id="start" onclick="start()">开始</rowspan>
          <rowspan id="reset" onclick="reset()">重来</rowspan>
        </p>
        <!--显示控制按钮区域-->
      </div>
      <!-- 排行榜 -->
      <div id="ranking">
        <div class="hearder">
          <img src="./img//pank.png" alt="" />
        </div>
        <div class="container">
          <table>
            <thead>
              <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>游戏时间</th>
              </tr>
            </thead>
            <tbody id="data">
              <tr>
                <th colspan="3">没有数据</th>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!-- 歌词区域 -->
      <div id="lyricc">
        <audio id="music"></audio>
        <div></div>
      </div>
    </div>
  </body>
</html>
